<template>
  <div
    style="
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    "
  >
<!-- 搜索框 -->

    <el-form :inline="true" :model="formUser" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="formUser.user" placeholder="搜索"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="numberSelect" :plain="true" type="refresh"
          >搜索</el-button
        >
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="ID" width="180">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单号" prop="number" width="200">
      </el-table-column>
      <el-table-column prop="shopname" label="商品名称" width="200">
      </el-table-column>
      <el-table-column prop="address" label="地址" width="200">
      </el-table-column>
      <el-table-column label="联系方式" width="200" prop="telephone">
      </el-table-column>
      <el-table-column label="消费者" width="180" prop="username">
      </el-table-column>
      <el-table-column label="支付方式" width="200" prop="payment">
      </el-table-column>
      <el-table-column label="订单状态" width="180" prop="state">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="danger"
            icon="el-icon-delete"
            @click="handleDelete(scope.$index, scope.row)"
            ></el-button
          >
        </template>
      </el-table-column>
    </el-table>

    
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        @size-change="handlePageSizeChange"
        @current-change="handlePageIndexChange"
        :current-page="pager.pageIndex"
        :page-size="pager.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pager.rowsTotal"
        background
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          number: "564556546148",
          date: "2016-05-02",
          shopname:'99',
          address: "福建闽西职业技术学院",
          username: "王小虎",
          telephone: "15260159515",
          payment: "微信支付",
          state: "已收货",
        },
        {
          number: "564556546148",
          date: "2016-05-02",
          shopname:'篮球',
          address: "福建闽西职业技术学院",
          telephone: "15260159515",
          username: "沪小胖",
          payment: "微信支付",
          state: "已收货",
        },
        {
          number: "564556546148",
          date: "2016-05-02",
          shopname:'dddd',
          address: "福建闽西职业技术学院",
          telephone: "15260159515",
          username: "沪小胖",
          payment: "微信支付",
          state: "已收货",
        },
      ],
          // 查询用户
      formUser: {
        user: "",
      },
      pager: {
        pageIndex: 1,
        pageSize: 10,
        rowTotal: 30,
      },
    };
  },
  methods: {
     handleDelete(index, row) {
      console.log(index, row);

      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 删除数据
          //删除接口deleteUser
          deleteUser(row.id)
            .then((data) => {
              console.log(data.code);
              if (data.code === 1000) {
                // 删除成功
                console.log(data);
                this.$message({
                  showClose: true,
                  message: "删除订单成功",
                  type: "success",
                });
                // 使用splice删除tableData数组里面从下标为index开始的第一个数
                this.tableData.splice(index, 1);
              } else if (data.code === 1001) {
                this.$message({
                  showClose: true,
                  message: "删除订单失败",
                  type: "error",
                });
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

     // 供货商查询按钮
    numberSelect() {
      // console.log(this.formUser.user);
      var searchContent = this.formUser.user;
      // console.log(searchContent);
      if (searchContent !== "") {
        // 搜索框存在类容
        postSelectUser(searchContent)
          .then((data) => {
            console.log(data);
            if (data.data.length != 0) {
              
              // console.log(data.data);

              this.tableData = data.data;
            } else {
              // 未查询到数据
              this.$message({
                message: "未搜索到数据哦",
                type: "warning",
              });
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        // 搜索框为空
        this.$message({
          message: "搜索框不能为空哦",
          type: "warning",
        });
      }
    },
    // 刷新按钮点击事件
    refresh() {
      this.reload();
    },
     // 分页属性方法
    handlePageIndexChange(val) {
      // console.log(val);
      this.pager.pageIndex = val;
      this.fecthData(this.pager);
    },
    handlePageSizeChange(val) {
      // console.log(val);
      this.pager.pageSize = val;
      this.fecthData(this.pager);
    },
      mounted() {
    // 分页
    this.fecthData(this.pager);
  },
  },
};
</script>

<style>
</style>